<script>
  export let size = "1em";
  export let color = "currentColor";
</script>

<svg
  width={size}
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M21 4C21 3.44772 20.5523 3 20 3H4C3.44772 3 3 3.44772 3 4V20C3 20.5523 3.44772 21 4 21H20C20.5523 21 21 20.5523 21 20V4ZM20 4.5C20 4.22386 19.7761 4 19.5 4H4.5C4.22386 4 4 4.22386 4 4.5V19.5C4 19.7761 4.22386 20 4.5 20H19.5C19.7761 20 20 19.7761 20 19.5V4.5Z"
    fill={color}
  />
  <path d="M4 12H6V14H4V12Z" fill={color} />
  <path d="M8 12H10V14H8V12Z" fill={color} />
  <path d="M12 12H14V14H12V12Z" fill={color} />
  <path d="M16 12H18V14H16V12Z" fill={color} />
  <path d="M6 14H8V16H6V14Z" fill={color} />
  <path d="M10 14H12V16H10V14Z" fill={color} />
  <path d="M14 14H16V16H14V14Z" fill={color} />
  <path d="M18 14H20V16H18V14Z" fill={color} />
  <path d="M4 16H6V18H4V16Z" fill={color} />
  <path d="M8 16H10V18H8V16Z" fill={color} />
  <path d="M12 16H14V18H12V16Z" fill={color} />
  <path d="M16 16H18V18H16V16Z" fill={color} />
  <path d="M6 18H8V20H6V18Z" fill={color} />
  <path d="M10 18H12V20H10V18Z" fill={color} />
  <path d="M14 18H16V20H14V18Z" fill={color} />
  <path d="M18 18H20V20H18V18Z" fill={color} />
  <path d="M4 4H6V6H4V4Z" fill={color} />
  <path d="M8 4H10V6H8V4Z" fill={color} />
  <path d="M12 4H14V6H12V4Z" fill={color} />
  <path d="M16 4H18V6H16V4Z" fill={color} />
  <path d="M6 6H8V8H6V6Z" fill={color} />
  <path d="M10 6H12V8H10V6Z" fill={color} />
  <path d="M14 6H16V8H14V6Z" fill={color} />
  <path d="M18 6H20V8H18V6Z" fill={color} />
  <path d="M4 8H6V10H4V8Z" fill={color} />
  <path d="M8 8H10V10H8V8Z" fill={color} />
  <path d="M12 8H14V10H12V8Z" fill={color} />
  <path d="M16 8H18V10H16V8Z" fill={color} />
  <path d="M6 10H8V12H6V10Z" fill={color} />
  <path d="M10 10H12V12H10V10Z" fill={color} />
  <path d="M14 10H16V12H14V10Z" fill={color} />
  <path d="M18 10H20V12H18V10Z" fill={color} />
</svg>
